<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品首页</title>
		<!-- 引入Bootstraps -->
		<script src="../bootstrap-4.6.1/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../bootstrap-4.6.1/bootstrap.min.css" />
		<script src="../bootstrap-4.6.1/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bootstrap-4.6.1/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入Layui -->
		<script src="../layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="lay"/>
		<!-- 引入自己 -->
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/shoppingcart.css" />
		<link rel="stylesheet" type="text/css" href="../public/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/shopphead.css" />
		
	</head>
	<body>
		<div id="app">
			<!-- 头部 -->
			<div class="header">
				<!-- 头部导航栏 -->
				<div class="header-nav">
					<!-- 版心 -->
					<div class="main clear">
						<!-- 地图ul -->
						<ul class="map">
							<li class="nav-show">
								<a href="javascript:void(0)" class="icon-a">
									<i class="iconfont">&#xec3f;</i>
									<span class="font">地区</span>
								</a>
								<!-- 国内外地区 -->
								<div class="map-land nav-collapse">
									<div class="item-lists">
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
									</div>
								</div>
							</li>
						</ul>
						<ul class="go-index">
							<!-- 返回首页 -->
							<li>
								<a href="../index.html">
									<i class="iconfont">&#xe600;</i>
									<span class="font">首页</span>
								</a>
							</li>
						</ul>
						<!-- 导航ul -->
						<ul class="nav-r">
							<li>
								<a href="html/login.html" id="userIndex">你好，请登录</a>
								&nbsp;&nbsp;
								<a href="html/register.html">免费注册</a>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">我的订单</a>
							</li>
							<li class="spacer"></li>
							<li class="cw-icon nav-show">
								<a href="">我的京东</a>
								<i class="iconfont">&#xe65f;</i>
								<div class="my-jd nav-collapse">

								</div>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">京东会员</a>
							</li>
							<li class="spacer"></li>
							<li class="cw-icon  nav-show">
								<a href="">企业采购</a>
								<i class="iconfont">&#xe65f;</i>
								<div class="enterprise nav-collapse">

								</div>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">客户服务</a>
							</li>
							<li class="spacer"></li>

							<li class="cw-icon  nav-show">
								<a href="">网站导航</a>
								<i class="iconfont">&#xe65f;</i>
								<div class="site-navigation nav-collapse">

								</div>
							</li>
							<li class="spacer"></li>
							<li class="cw-icon  nav-show">
								<a href="address.html">我的地址</a>
								<div class="site-navigation nav-collapse nav-phone">

								</div>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">网站无障碍</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 头部logo搜索 -->
				<div class="logo-sea">
					<div class="main">
						<!-- 左边logo -->
						<div class="left-logo">
							<h1>

							</h1>
						</div>
						<!-- 中间搜索 -->
						<div class="center-sea">
							<!-- 顶部搜索 -->
							<div class="search-t">
								<!-- 搜索盒子 -->
								<div class="from-box">
									<input type="text" id="sea-input" value="" />
									<span class="iconfont">
										&#xe663;
									</span>
									<input type="button" id="sea-btn" value="&#xe61e;" class="iconfont" />
								</div>
								<!-- 购物车 -->
								<div class="settleup nav-show">
									<!--显示的购物车 -->
									<div class="show-setup">
										<i class="iconfont">&#xe601;</i>
										<a href="../html/cartIndex.html">购物车</a>
										<i class="icon-num">0</i>
									</div>
									<!--隐藏的购物车 -->
									<div class="hide-setup nav-collapse">
										11
									</div>
								</div>
								<!-- 热榜关键词推荐 -->
								<div class="hotwords">
									<a href="" class="style-red">零食和好物</a>
									<a href="">红米k50</a>
									<a href="">进口超市</a>
									<a href="">焕新季</a>
									<a href="">家装节</a>
									<a href="">iPad Air</a>
									<a href="">鲜花9.9</a>
									<a href="">品质建材</a>
								</div>
								<!-- 其他导航栏 -->
								<div class="navitems">
									<ul>
										<li>
											<a href="" class="style-red">秒杀</a>
										</li>
										<li>
											<a href="" class="style-red">优惠券 </a>
										</li>
										<li>
											<a href="">PLUS会员</a>
										</li>
										<li>
											<a href="">品牌闪购</a>
										</li>
									</ul>
									<ul>
										<li>
											<a href="">拍卖</a>
										</li>
										<li>
											<a href="">京东家电</a>
										</li>
										<li>
											<a href="">京东超市</a>
										</li>
										<li>
											<a href="">京东生鲜</a>
										</li>
									</ul>
									<ul>
										<li>
											<a href="">京东国际</a>
										</li>
										<li>
											<a href="">京东云</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<!-- 右边二维码 -->
						<div class="right-em">

						</div>
					</div>
				</div>
			</div>
			<!-- 内容 -->
			<div class="context">
				<!-- 内容顶部 -->
				<div class="con-top"></div>
				<!-- 内容正文 -->
				<div class="con-text">
					<div class="main">
						<!-- 轮播图  右边 -->
						<div class="left-swper box">
							<!-- 大图 -->
							<div class="lsw-top smallBox">
								<img src="../img/background.png">
								 <span class="lay"></span>
							</div>
							<div class="bigBox">
								<img src="../img/background.png">
							</div>
							<!-- 底部分页 -->
							<div class="lsw-pages">
								<!-- 向左 -->
								<span id="pages-left" class="iconfont">
									&#xe779;
								</span>
								<!-- 向右 -->
								<span id="pages-right" class="iconfont">
									&#xe775;
								</span>
								<div class="items">
									<ul>

									</ul>
								</div>

							</div>
						</div>
						<!-- 商品介绍 左边 -->
						<div class="right-proitem">
							<!-- 商品价格 -->
							<div class="rp-text"></div>
							<!-- 加入购物车 -->
							<div class="shoppingCar">
								<input type="text" id="shap-num" value="1" />
								<div class="readdBox">
									<input type="button" value="+" id="add" />
									<input type="button" id="readd" value="-" />
								</div>
								<!--  加入购物车-->
								<button type="button" class="btn btn-danger" id="card-add" data-target="#myModal" data-toggle="popover" title  data-content="弹出框内容" data-original-title="温馨提示">加入购物车</button>
								  <!-- 模态框 -->
								  <div class="modal fade" id="myModal" data-toggle="modal" data-target="#card-add">
								    <div class="modal-dialog">
								      <div class="modal-content">
								        <!-- 模态框头部 -->
								        <div class="modal-header">
								          <h4 class="modal-title">请登录</h4>
								          <button type="button" class="close" data-dismiss="modal">&times;</button>
								        </div>
								      </div>
								    </div>
								  </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 尾部 -->
			<div class="footer">

			</div>
		</div>
	</body>
	<script src="../public/public.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/shoppingcart.js" type="text/javascript" charset="utf-8"></script>
	<!-- 插件 -->
	<script src="../public/zoom.js" type="text/javascript" charset="utf-8"></script>
</html>
